<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            type="text"
            v-model="ioNumber"
            placeholder="IO Number"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input
            type="text"
            v-model="userName"
            placeholder="Name"
            clearable
          />
        </el-col>
        <el-col :span="6">
          <el-checkbox v-model="deviceName">过滤</el-checkbox>
        </el-col>


      </el-row>
      <el-row
        :gutter="20">
        <el-col
        :span="6">
          <el-input
            type="text"
            v-model="costCenter"
            placeholder="Cost Center"
            clearable
          />
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="timeBetween"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy/MM/dd"
            @change="getAllNum">
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-button @click="getAllNum" size="small" type="primary">查询</el-button>
          <el-button @click="addDialog = true" v-if="userAuth === 'admin' " size="small" type="primary">新增</el-button>
        </el-col>

      </el-row>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="userName"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ioNumber"
          label="IO Number"
          width="180">
        </el-table-column>
        <el-table-column
          prop="costCenter"
          label="Cost Center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备">
        </el-table-column>
        <el-table-column
          prop="dateTime"
          label="工作日期">
        </el-table-column>
        <el-table-column
          prop="workHour"
          label="工时">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-sizes="[10,20,30]"
        :page-size="pageSize"
        :current-page="pageNo"
        @current-change="pageClick">
      </el-pagination>
    </div>

    <!--    新增的弹框-->
    <div class="addDia">
      <el-dialog
        title="添加工时"
        :visible.sync="addDialog"
        :before-close="clearForm"
        width="50%">
        <el-form :model="addForm" :rules="addRules" ref="addForm">
          <el-form-item label="IO Number" prop="ioNumber">
            <el-input v-model="addForm.ioNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="addForm.deviceName" />
          </el-form-item>
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="addForm.userName" />
          </el-form-item>
          <el-form-item label="部门" prop="costCenter">
            <el-input v-model="addForm.costCenter" />
          </el-form-item>
          <el-form-item label="工作日期" prop="dateTime">
            <el-date-picker
              v-model="addForm.dateTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="工时" prop="workHour">
            <el-input v-model="addForm.workHour" />
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clearForm">取 消</el-button>
          <el-button type="primary" @click="addCount('addForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAllNum, addUserWorkCount ,addUserLog} from '../api/api'

export default {
  name: 'WorkTime',
  data () {
    return {
      tableData: [],
      costCenter: "",
      ioNumber: '',
      deviceName: '',
      timeBetween: [],
      userAuth:"",
      total: 0,
      pageSize: 10,
      pageNo: 1,
      userName: '',
      addDialog: false,
      addForm: {
        ioNumber: '',
        deviceName: '',
        costCenter:"",
        userName: '',
        dateTime: '',
        workHour: ''
      },
      addRules: {
        ioNumber: [
          { required: true, message: '请输入ioNumber', trigger: 'blur' }
        ],
        deviceName: [
          { required: true, message: '请输入设备民称', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入姓名', trigger: 'bulr' }
        ],
        dateTime: [
          { required: true, message: '请输入工作日期', trigger: 'blur' }
        ],
        costCenter: [
          {required: true,message: "请输入部门",trigger: "blur"}
        ],
        workHour: [
          { required: true, message: '请输入工时', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getAllNum (val) {
      if (undefined == val) {
        val = 1
      }
      let param = {
        ioNumber: this.ioNumber,
        deviceName: this.deviceName,
        userName: this.userName,
        startTime: this.timeBetween[0],
        endTime: this.timeBetween[1],
        pageSize: this.pageSize
      }
      /**/

      let newVar = await getAllNum(param)
      this.tableData = newVar.detailData.records
      this.total = newVar.detailData.total
    },
    async pageClick (val) {
      let param = {
        userName:this.userName,
        ioNumber: this.ioNumber,
        deviceName: this.deviceName,
        startTime: this.timeBetween[0],
        endTime: this.timeBetween[1],
        pageSize: this.pageSize,
        pageNo: val
      }
      /**/

      let newVar = await getAllNum(param)
      this.tableData = newVar.detailData.records
    },
    clearForm () {
      for (let diaFormKey in this.addForm) {
        this.addForm[diaFormKey] = ''
      }
      this.addDialog = false
    },
    async addNewCount () {
      var res = await addUserWorkCount(this.addForm)
      var s = JSON.stringify(this.addForm)
      let param = {
        userName: this.userAuth,
        message: "新增了一个记录，数据为"+s
      }
      await addUserLog(param)
      this.clearForm()
      return res.code
    },
    addCount (formData) {
      this.$refs[formData].validate((vaid) => {
        if (vaid) {
          var result = this.addNewCount()
          this.getAllNum()
        }
      })
    }
  },
  created () {
    this.userAuth = window.localStorage.getItem("userAuth");
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>